// 放置全局指令
import Vue from 'vue'
import store from '@/store'

// 1、熟悉自定义指令的语法

// 2、编写一个无逻辑但可以运行的自定义指令
// 注册一个全局自定义指令 `v-checkBtn`
Vue.directive('checkBtn', {
  // el: 指令绑定的那个元素对象 dom
  // binding.value: 指令等于号后面绑定的表达式的值 v-if="xxx"
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, binding) {
    console.log(el, binding.value)
    // 拿到el 拿到value 配合权限数据 做按钮显示隐藏控制
    const points = store.state.user.userInfo.roles.points
    if (!points.includes(binding.value)) {
      // 如果绑定的权限按钮中找不到 binding.value 就把当前按钮移除
      // 移除eldom 1、remove() 2、先找到父节点 removeChild
      el.remove()
    }
  }
})

// 把当前写法改造成插件的写法

// 函数定义法写插件 -》函数本身会被当成install方法自动执行
// 还有对象的写法 写插件。 ——》 const directive = {
//   install(Vue) {
//     Vue.directive('checkBtn', {
//           // el: 指令绑定的那个元素对象 dom
//           // binding.value: 指令等于号后面绑定的表达式的值 v-if="xxx"
//           // 当被绑定的元素插入到 DOM 中时……
//           inserted: function(el, binding) {
//             console.log(el, binding.value)
//             // 拿到el 拿到value 配合权限数据 做按钮显示隐藏控制
//             const points = store.state.user.userInfo.roles.points
//             if (!points.includes(binding.value)) {
//               // 如果绑定的权限按钮中找不到 binding.value 就把当前按钮移除
//               // 移除eldom 1、remove() 2、先找到父节点 removeChild
//               el.remove()
//             }
//           }
//         })
//   }
// }

// const directivePlugin = (Vue) => {
//   Vue.directive('checkBtn', {
//     // el: 指令绑定的那个元素对象 dom
//     // binding.value: 指令等于号后面绑定的表达式的值 v-if="xxx"
//     // 当被绑定的元素插入到 DOM 中时……
//     inserted: function(el, binding) {
//       console.log(el, binding.value)
//       // 拿到el 拿到value 配合权限数据 做按钮显示隐藏控制
//       const points = store.state.user.userInfo.roles.points
//       if (!points.includes(binding.value)) {
//         // 如果绑定的权限按钮中找不到 binding.value 就把当前按钮移除
//         // 移除eldom 1、remove() 2、先找到父节点 removeChild
//         el.remove()
//       }
//     }
//   })
// }
// export default directivePlugin
//  然后再 main.js 中全局导入
